<!-- 快捷方式创建 不同的编辑器 快捷方式不太一样 需要自行百度 sublime 
	html + tap键

	千万注意 :每次写完代码 记得保存 contrl+s
 -->
 <!DOCTYPE html>
 <html>
	 <head>
	 	<title>疫苗股的惊魂</title>
	 	<!-- 嵌入式CSS -->
	 	<style type="text/css">
		 	/*取消掉 body自带的 8像素px 外边距margin*/
		 	body{
		 		/*外边距*/
		 		margin: 0px;
		 	}
	 		/*<!-- 1.装饰 头部的导航条 -->*/
		 	header{
		 		/*背景色*/
		 		background-color: rgb(140, 121, 94);
		 		/*设置高度*/
		 		height: 30px;

		 		/*让里面的文字 上下垂直居中 行高*/
		 		line-height: 30px;
		 	}

		 	/*后代选择器*/
		 	header a{
		 		color: white;
		 		/*字体的大小*/
		 		font-size: 14px;
		 		/*去掉下划线*/
		 		text-decoration: none;
		 		/*内边距*/
		 		padding-left:5px;
		 		padding-right: 5px;

		 		height: 30px;
		 		/*将类型改变*/
		 		display: inline-block;
		 	}
		 	header span{
		 		font-size:4px;
		 		color: white;

		 	}
		 	/*鼠标放上去 改变背景颜色*/
		 	header a:hover{
		 		background:rgb(122, 106, 83);
		 	}

		 	/*导航条右侧的 登录按钮栏  始终显示在右侧*/
		 	.headerright{
		 		/*浮动*/
		 		float: right;
		 		height: 30px;
		 		width: 150px;
		 		
		 	}
		 	.headerright button{
		 		float: left;
		 		margin-top:4px;
		 		color: blue;

		 	}
		 	/*鼠标放上去的时候才变颜色*/
		 	.headerright button:hover{
		 		background: rgb(253, 247, 197);
		 	}
		 	.headerright img{
		 		width: 13px;
		 		height: 13px;
		 		margin-left: 20px;
		 	}


		 	/* 第2部分 ----------------------*/
		 	.ad {
		 		/*左右两边的内边距 20px*/
		 		padding-left: 20px;
		 		padding-right: 20px;

		 		/*距上面 10px*/
		 		margin-top: 10px;
		 	}
		 	/*类选择器 + 后代选择器*/
		 	.ad .imgone{
		 		width: 897px;
		 		height: 80px;	
		 	}
		 	.ad .imgtwo{
		 		width: 200px;
		 		height: 80px;
		 		/*距左边是 10px*/
		 		margin-left: 10px;
		 	}

		 	/*3.新闻的小类 ----------------------*/
		 	.smallnews {
		 		margin-left: 20px;
		 		margin-right: 20px;
		 		height: 50px;
		 		
		 		/*行高*/
		 		line-height: 50px;

		 		/*边框 下
				1.边框的大小
				2.实线
				3.线条的颜色
				4. top bottom left right
		 		*/

		 		border-bottom: 2px solid rgb(140, 121, 94)
		 	}
		 	.smallnews img{
		 		width: 125px;
		 		height: 25px;

		 		float: left;
		 		margin-top:12px;
		 	}
		 	.smallnews .newscontent{
		 		float: left;
		 	}
		 	.smallnews form{
		 		float: right;
		 	}
		 	.smallnews .newscontent a{
		 		color: black;
		 		text-decoration: none;
		 		margin-left: 5px;
		 		padding-left:3px;
		 		padding-right: 3px;
		 		font-size: 12px; 
		 	}
		 	.smallnews .newscontent .last{
		 		color: rgb(139, 120, 95);
		 	}
		 	.smallnews .newscontent a:hover{
		 		background: rgb(139, 120, 95);
		 		color: white;
		 	}

		 	.smallnews form input{
		 		float: left;
		 		margin-top:15px;

		 		/*去掉蓝色的边*/
		 		outline: none
		 	}
		 	.smallnews form button{
		 		float: left;
		 		margin-top:15px;
		 	}

		 	/*4. 左侧的新闻列表----------------------------------*/
		 	.leftlist{
		 		width: 155px;
		 		float: left; /*为了让第5部分 放在中间*/
		 		/*如果不设置高度 , 默认 以内容为基准*/
		 		/*去掉 系统的样式*/
		 		list-style: none;

		 		/*设置3个边框*/
		 		border:1px solid gray;/*4个边*/
		 		border-top:0px;

		 		/*margin-left: 20px;*/
		 		/*取消  自带的内边距, 外边距*/
		 		padding: 0px;
		 		margin: 0px 20px 0px;

		 		/*设置

		 		固定定位  以浏览器为参照物*/
		 		/*position:fixed;
		 		left:20;
		 		top: 0;*/

		 	}

		 	.leftlist a{
		 		font-size: 10px;
		 		color: black;
		 		/*去掉下划线*/
		 		text-decoration: none;
		 	}

		 	/*第一个 li标签 比较特殊 所以 单独处理*/
		 	.leftlist .one{
		 		/*背景图片*/
		 		background-image: url('images/news.png');
		 		/*设置背景图的大小的*/
		 						/*宽度   高度*/
		 		background-size: 155px 50px;
		 		/*是否 重复*/
		 		background-repeat: no-repeat;
		 		height: 50px;
		 		width: 155px;
		 		border:0px;
		 	}
		 	.leftlist li{
		 		padding: 5px 10px;
		 		border-bottom: 1px solid gray;
		 	}

		 	/*鼠标放上去  改变颜色 和 下划线*/
		 	.leftlist a:hover{
		 	
		 		color: rgb(152, 133, 108);
		 		/*下划线*/
		 		text-decoration: underline;
		 	}

		 	/*5. 正文 ------------------------*/
		 	.article{
		 		width: 560px;
		 		float: left;
		 		
		 		margin-right: 20px;

		 	}

		 	.article h1{
		 		font-size: 20px;
		 	}
		 	.article p{
		 		/*缩进文字*/
		 		text-indent: 2em;
		 	}
		 	.article h6{
		 		/*缩进文字*/
		 		text-indent: 2em;
		 	}

		 	/*6.右边的列表*/
		 	.rightlist{
		 		width: 340px;
		 		float: right;
		 		margin-right: 20px;

		 		
		 	}
		 	/*精华推荐的四个字 的设置*/
		 	.rightlist span{

		 		color: rgb(152, 133, 108);
		 		/*a  span  内联元素 宽高无效,外边距上下无效 所以改变了 标签的类型*/
		 		display: inline-block;
		 		margin-top: 20px;
		 		border-bottom: 2px solid rgb(152, 133, 108);
		 	}

		 	.rightlist ol{
		 		/*删除序号*/
		 		list-style: none;
		 		/*去掉左侧 的 40 内边距*/
		 		padding: 0px;
		 		/*上边框*/
		 		border-top:2px solid blue;
		 		margin: 0px;
		 		padding-top: 16px;
		 		padding-bottom: 16px;
		 		margin-top:-2px;
		 	}
		 	.rightlist li{
		 		height: 75px;
		 		margin-bottom: 16px;
		 	}

		 	/*设置 图片的大小*/
		 	.rightlist li img{

		 		width: 150px;
		 		height: 75px;
		 		float:left;
		 	}
		 	.rightlist li a{
		 		float: left;
		 		width: 180px;
		 		color: black;
		 		font-size: 14px;
		 		margin-left:10px;
		 		text-decoration:none;
		 	}

		 	.rightlist li a:hover{
		 		color:brown;
		 		text-decoration: underline;
		 	}
	 	</style>

	
	 	<!-- javascrpit 功能代码 -->
	 	<script type="text/javascript">

	 		// 等待 所有的标签加载完毕之后  在 获取标签 这样的话 我们结果就有了

	 		window.onload = function () {
	 			// 匿名函数 没有名字

		 		// 获取按钮 这个标签
		 		//  id是唯一的 每次获取一个
		 		var more = document.getElementById('more');

		 		// 根据标签类型获取 集合
		 		var tagAel = document.getElementsByTagName('a')

		 		console.log('----' + tagAel.length)

		 		var haedernav = document.getElementById('one')
		 		// 点击 header 修改 导航条的背景颜色 
		 		more.onclick = function (){
		 			console.log('点击的..');

		 			haedernav.style.background = 'red';

		 		}

		 		var left_list = document.getElementById('left_list')
		 		var article = document.getElementById('article')

		 		// 监听 页面的滚动的
		 		window.onscroll = function(){

		 			console.log( document.documentElement.scrollTop)

		 			// 当页面 滚动到180的时候
		 			// 我们 就停止 滚动了
		 			// 让左侧的 新闻列表 漂起来
		 			if (document.documentElement.scrollTop > 180) {

		 				// 左侧新闻列表  固定定位
		 				left_list.style.position = "fixed"
		 				left_list.style.left = "20px"
		 				left_list.style.top = "0"

		 				// 正文 位置不变
		 				article.style.marginLeft = "225px"

		 				// alert('21324')
		 				// return
		 			}else{
		 				// 左侧新闻列表  取消定定位
		 				left_list.style.position = "static"
		 				// 正文 位置不变
		 				article.style.marginLeft = "20px"
		 			}

		 			// console.log(window.scrollTop)
		 		}
	 		}

	 		
	 	</script>

	 	
	 </head>
	 <body>

	 	<!-- 1.头部的导航条 header h5特有的 -->
	 	<header id="one">
	 		<a class="two" href="http://www.qq.com" target="_blank">首页</a>
	 		<span>|</span>
	 		<a class="two" href="./one.html">新闻</a>
	 		<span>|</span>
	 		<!-- # 代表的是空链接 -->
	 		<a href="#">体育</a>
	 		<span>|</span>
	 		<a href="#">娱乐</a>
	 		<span>|</span>
	 		<a href="#">视频</a>
	 		<span>|</span>
	 		<a href="#">首页</a>
	 		<span>|</span>
	 		<a  id="more" href="#" >更多</a>
	 		<span >|</span>

	 		<div class="headerright">
		 			<!-- 按钮标签 buttong h5新增 -->
		 		<button>一键登录</button>
		 		<!-- 图片标签 img -->
		 		<img src="images/start.png">
		 			
	 		</div>
	 		
	 	</header>
	 	<!-- 2.广告条 -->
	 	<div class="ad">
	 		<img class="imgone" src="images/ad1.png"><img class="imgtwo" src="images/ad2.png">
	 	</div>
	 	<!-- 3. 新闻小分类 -->
	 	<div class="smallnews">
	 		<!-- 1.logo -->
	 		<img src="images/logo.png">
	 		<div class="newscontent">
		 			<!-- 2.文字 链接 -->
		 		<a href="http://stock.qq.com/" target="_blank">证券</a>
		 		<a href="https://new.qq.com/ch2/ganggu" target="_blank">港股</a>
		 		<a href="#">国际</a>
		 		<a href="#">金融</a>
		 		<a href="#" class="last">财经资讯</a>
	 		</div>

	 		<!-- 3.搜索提交数据 标签
				 给服务器提交数据的 叫表单标签
	 		 -->
	 		<form>
	 			<!-- 1.用户输入框 普通文本 -->
	 			<input type="text" value="长生" name="username">
	 			<button>搜索</button>
	 			<!-- 这是按钮的 另外一种写法 -->
	 			<!-- <input type="button" value="搜索"> -->
	 		</form>

	 	</div>

	 	<!-- 4. 左侧的 新闻列表 列表标签 无序列表 -->
	 	<ul id="left_list" class="leftlist">
	 		<li class="one"></li>
	 		<li>

	 			<a href="#">
	 				通过霸蛮书记李亿龙亲戚揽工程，湖南两商人返提成被定新罪名
	 			</a>
	 		</li>
	 		<li>
	 			<a href="#">
	 				通过霸蛮书记李亿龙亲戚揽工程，
	 			</a>
	 		</li>
	 		<li>
	 			<a href="#">
	 				通过霸蛮书记李亿龙亲戚揽工程，湖南两商人返提成被定新罪名
	 			</a>
	 		</li>
	 		<li>
	 			<a href="#">
	 				通过霸蛮书记李亿龙亲戚揽工程，
	 			</a>
	 		</li>
	 		<li>
	 			<a href="#">
	 				通过霸蛮书记李亿龙亲戚揽工程，湖南两商人返提成被定新罪名
	 			</a>
	 		</li>
	 		<li>
	 			<a href="#">
	 				通过霸蛮书记李亿龙亲戚揽工程，
	 			</a>
	 		</li>
	 		<li>
	 			<a href="#">
	 				通过霸蛮书记李亿龙亲戚揽工程，湖南两商人返提成被定新罪名
	 			</a>
	 		</li>
	 	</ul>

	 	<!-- 5.正文 -->
	 	<div id="article" class="article">
	 		<!-- 1. 新闻标题 h1-h6 一级标题 二级标题 -->
	 		<h1>疫苗股惊魂一周：ST长生离公司最低估值还有19个跌停</h1>
	 		<h6>“疫苗事件”惊魂一周：11家基金公司发布300多份公告下调ST长生估值 离公司最低估值还有19个跌停</h6>

	 		<!-- 段落标签p
				空格 在前端页面 是不被识别; 字符实体 &nbsp;
	 		 -->
	 		<p>          随着ST长生疫苗案件的不断深入调查，上周生物疫苗股也迎来了“惊魂一周”。截至7月29日，已有11家基金公司发布超过300份下调ST长生估值的公告，其最低估值也已降至3.96元/股。
	 		</p>
	 		<p>
	 			         事实上，就近期基金二季报披露的业绩情况来看，医药主题基金业绩表现领跑全行业。而在近期市场情绪的推动下，原本赚得“盆满钵盈”的医药主题基金可能将迎来一段阵痛期。
	 		</p>

	 		<p>
	 			         7月15日晚间，ST长生首次披露其子公司存在疫苗生产记录造假情况，至今尚不足半月。此后，ST长生陆续传出被证监会调查、子公司停产、董事长及部分高管无法正常履职、银行账户被冻结等一系列负面信息。7月26日，ST长生被实施其他风险警示，公司股票简称由“长生生物”变更为“ST长生”。
	 		</p>
	 		<p>
	 			         截至上周五，ST长生已迎来第9个跌停板，股价跌至10.6元/股。而受“疫苗门”事件影响，上周医药生物板块下跌明显，5日累计跌幅达到3.76%，在28个申万一级行业指数中处于“领跌”状态。在此情况下，在今年上半年一路“顺风顺水”的多只医药主题基金的日子也不好过。
	 		</p>
	 		<p>
	 			         Wind数据显示，今年一季度，共有11只基金重仓持有ST长生，持股数量合计为1055.81万股，彼时持股总市值为2.03亿元。不过，值得庆幸的是，在近期基金披露的二季报中，上述11只基金的前十大重仓股名单中，均未有ST长生的身影。目前，在二季度末还重仓持有ST长生的仅有东方利群混合A和易方达生物科技指数两只基金。
	 		</p>
	 		<p>
	 			         Wind数据显示，今年一季度，共有11只基金重仓持有ST长生，持股数量合计为1055.81万股，彼时持股总市值为2.03亿元。不过，值得庆幸的是，在近期基金披露的二季报中，上述11只基金的前十大重仓股名单中，均未有ST长生的身影。目前，在二季度末还重仓持有ST长生的仅有东方利群混合A和易方达生物科技指数两只基金。
	 		</p>
	 		<p>
	 			         Wind数据显示，今年一季度，共有11只基金重仓持有ST长生，持股数量合计为1055.81万股，彼时持股总市值为2.03亿元。不过，值得庆幸的是，在近期基金披露的二季报中，上述11只基金的前十大重仓股名单中，均未有ST长生的身影。目前，在二季度末还重仓持有ST长生的仅有东方利群混合A和易方达生物科技指数两只基金。
	 		</p>
	 		<p>
	 			         Wind数据显示，今年一季度，共有11只基金重仓持有ST长生，持股数量合计为1055.81万股，彼时持股总市值为2.03亿元。不过，值得庆幸的是，在近期基金披露的二季报中，上述11只基金的前十大重仓股名单中，均未有ST长生的身影。目前，在二季度末还重仓持有ST长生的仅有东方利群混合A和易方达生物科技指数两只基金。
	 		</p>
	 		<p>
	 			         Wind数据显示，今年一季度，共有11只基金重仓持有ST长生，持股数量合计为1055.81万股，彼时持股总市值为2.03亿元。不过，值得庆幸的是，在近期基金披露的二季报中，上述11只基金的前十大重仓股名单中，均未有ST长生的身影。目前，在二季度末还重仓持有ST长生的仅有东方利群混合A和易方达生物科技指数两只基金。
	 		</p>
	 		<p>
	 			         Wind数据显示，今年一季度，共有11只基金重仓持有ST长生，持股数量合计为1055.81万股，彼时持股总市值为2.03亿元。不过，值得庆幸的是，在近期基金披露的二季报中，上述11只基金的前十大重仓股名单中，均未有ST长生的身影。目前，在二季度末还重仓持有ST长生的仅有东方利群混合A和易方达生物科技指数两只基金。
	 		</p>
	 		<p>
	 			         Wind数据显示，今年一季度，共有11只基金重仓持有ST长生，持股数量合计为1055.81万股，彼时持股总市值为2.03亿元。不过，值得庆幸的是，在近期基金披露的二季报中，上述11只基金的前十大重仓股名单中，均未有ST长生的身影。目前，在二季度末还重仓持有ST长生的仅有东方利群混合A和易方达生物科技指数两只基金。
	 		</p>
	 		<p>
	 			         Wind数据显示，今年一季度，共有11只基金重仓持有ST长生，持股数量合计为1055.81万股，彼时持股总市值为2.03亿元。不过，值得庆幸的是，在近期基金披露的二季报中，上述11只基金的前十大重仓股名单中，均未有ST长生的身影。目前，在二季度末还重仓持有ST长生的仅有东方利群混合A和易方达生物科技指数两只基金。
	 		</p>
	 		
	 	</div>
	 	<!-- 6. 右侧的 列表 有序列表ol -->
	 	<div class="rightlist">
	 		<div>
	 			<span>精华推荐</span>
	 		</div>

	 		<ol>
	 			<li>
	 				<img src="./images/tui1.png">
	 				<a href="#">杨望：绿色零售渐行渐近</a>
	 			</li>
	 			<li>
	 				<img src="./images/tui2.png">
	 				<a href="#">第465期：英国女王到底有多少地产？</a>
	 			</li>
	 			<li>
	 				<img src="./images/tui2.png">
	 				<a href="#">第465期：英国女王到底有多少地产？</a>
	 			</li>
	 			<li>
	 				<img src="./images/tui2.png">
	 				<a href="#">第465期：英国女王到底有多少地产？</a>
	 			</li>
	 			<li>
	 				<img src="./images/tui2.png">
	 				<a href="#">第465期：英国女王到底有多少地产？</a>
	 			</li>
	 			<li>
	 				<img src="./images/tui2.png">
	 				<a href="#">第465期：英国女王到底有多少地产？</a>
	 			</li>
	 			<li>
	 				<img src="./images/tui2.png">
	 				<a href="#">第465期：英国女王到底有多少地产？</a>
	 			</li>
	 			
	 			
	 		</ol>

	 	</div>
	 	
	 </body>
 </html>

 











